<template>
	<div>
		<!--start 购物车-->
		<div class="list">
      <div v-if="vue_list_allGoods.length == 0" class="noneGoods">
         <em class="iconfont">&#xe617;</em>
         <span>购物车没有商品哦</span>
      </div>
			<ul v-else>
				<li class="clearfix" v-for="(item,index) in vue_list_allGoods" >
					<div class="fl checkboxDiv">
						<Checkbox v-model="item.selectItem"></Checkbox>
					</div>
					<div class="fl contentDiv">
						<div class="img fl">
							<img :src="item.goodsBigPic" width="80%" height="auto" alt="" />
						</div>
						<div class="goodsDetail fl">
							<p>{{item.goodsName}}</p>
							<p>{{item.goodsSkuValue}}</p>
							<div class="clearfix">
								<span class="fl">
									&yen;
									<span>{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
								</span>
								<el-input-number v-model="item.goodsBuyNum" class="fr countN" :max="100" :min="1"></el-input-number>
							</div>
							<div class="deleteIcon" @click="vFun_goods_delete(item.cartGoodsCode)">
								<i class="iconfont">&#xe61c;</i>
							</div>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<!--end 购物车-->
		<!--start footer-->
		<div class="footer clearfix" v-if="!vue_edit">
			<div class="selectAll fl">
				<Checkbox v-model="vue_checkbox_allSelect">全选</Checkbox>
			</div>
			<div class="countPric fl">
				<p>合计：&yen;{{Public.formatMoney(finalCountPric,2)}}</p>
				<p>总额：&yen;{{Public.formatMoney(countPric,2)}} 立减：&yen;{{Public.formatMoney(countFavourablePric,2)}}</p>
			</div>
			<div class="okBtn fr" @click="vFun_okBtn">
				去结算
			</div>
		</div>
		<div class="footer clearfix" v-else>
			<div class="selectAll fl">
				<Checkbox v-model="vue_checkbox_allSelect">全选</Checkbox>
			</div>
			<span class="fr red" @click="vFun_goods_delate">删除</span>
		</div>
    <vue-footer></vue-footer>
		<!--end footer-->
	</div>
</template>

<script>
	import { Toast } from 'mint-ui'; //引入弹框
	import { MessageBox } from 'mint-ui';
  import vueFooter from '../../components/footer/footer';     //引入底部
	export default {
    components: {
      vueFooter
    },
		data() {
			return {
				vue_header_title: '购物车',
				vue_list_allGoods: [],
				vue_clone_allGoods: [], //存储克隆出来的list
				vue_header_rightText: "编辑", //头部右边按钮文本
				vue_checkbox_allSelect: false, //全部选择
				vue_edit: false //是否显示编辑按钮
			}
		},
		watch: {
			vue_checkbox_allSelect: function(val) { //控制全选
				this.vue_list_allGoods.forEach((item, index, arr) => {
					item.selectItem = val
				})
			},
			vue_list_allGoods: { //监听加减数量
				handler: function(val, oldVal) {
					if(oldVal.length && this.vue_clone_allGoods.length) {
						val.forEach((item, index, arr) => {
							if(item.goodsBuyNum != this.vue_clone_allGoods[index].goodsBuyNum) {
								this.axios({
									method: "PUT",
									url: "/v3/sale/cartGoodss/" + item.cartGoodsCode,
									data: {
										"goodsBuyNum": item.goodsBuyNum
									}
								}).then((res) => {
									this.vue_clone_allGoods = JSON.parse(JSON.stringify(arr)); //复制一份备用
									//									Toast({
									//										message: '操作成功',
									//										iconClass: 'fontSize iconfont icon-chenggong'
									//									});
								}).catch((err) => {
									Toast({
										message: '操作失败',
										iconClass: 'fontSize iconfont icon-shibai'
									});
								})
							};
						});
						/* 当没有任何一项商品被选中时，就去掉全选checkbox的勾 */
						if(val.every((item, index, arr) => {
								return !item.selectItem;
							})) {
							this.vue_checkbox_allSelect = false;
						}
					}
				},
				deep: true
			}
		},
		filters: {
			pricInteger(pric, num) { //过滤器，显示单价和数量的乘
				return parseFloat(pric) * parseFloat(num);
			}
		},
		computed: {
			vue_list_checkboxGoods: function() { //获取选中的商品
				return this.vue_list_allGoods.filter((item, index, arr) => {
					if(item.selectItem) {
						return item
					}
				})
			},
			countPric: function() { //统计总价
				return this.vue_list_checkboxGoods.reduce((previousValue, currentValue) => {
					return previousValue + (parseFloat(currentValue.goodsSalePrice) * parseFloat(currentValue.goodsBuyNum))
				}, 0)
			},
			countFavourablePric: function() { //统计总的优惠
				return this.vue_list_checkboxGoods.reduce((previousValue, currentValue) => {
					return previousValue + currentValue.discountPrice
				}, 0)
			},
			finalCountPric: function() { //统计实际总额
				return this.countPric + this.countFavourablePric;
			},

		},
		methods: {
			queryByPage() { //获取数据
				this.axios({
					method: "POST",
					url: "/v3/sale/cartGoodss/listAll",
					data: {}
				}).then((res) => {
					res.data.list.forEach((item, index, arr) => {
						item.selectItem = false;
					});
					this.vue_list_allGoods = res.data.list;
					this.vue_clone_allGoods = JSON.parse(JSON.stringify(this.vue_list_allGoods));
          this.vue_list_allGoods[0].selectItem = true;
				}).catch((err) => {
				})
			},
			vFun_goods_deleteCall(cartGoodsCodeStr) {
				this.axios({
					method: "DELETE",
					url: "/v3/sale/cartGoodss/" + cartGoodsCodeStr
				}).then((res) => {
					this.queryByPage();
					this.Public.vFun_openSuccess('操作成功');
				}).catch((err) => {
					this.Public.vFun_openError('操作失败');
				})
			},
			vFun_goods_delete(cartGoodsCodeStr) {
				MessageBox({
					title: '提示',
					message: '请确认是否删除商品？',
					confirmButtonText: '确认',
					cancelButtonText: '取消',
					confirmButtonClass: 'redBg',
					showCancelButton: true
				}).then(btnType => {
					if(btnType == 'confirm') {
						this.vFun_goods_deleteCall(cartGoodsCodeStr);
					}
				})
			},
			vFun_okBtn() {
				if(this.vue_list_checkboxGoods.length) {
					localStorage.setItem('select_goods', JSON.stringify(this.vue_list_checkboxGoods));
					this.$router.push({
						path: '/saveOrder'
					});
				} else {
					this.Public.vFun_openInfo('您还没有选择商品哦！');
					//			Toast({
					//				  message: '您还没有选择商品哦！'
					//				});
				}
			},
			vFun_edit_tabs() {
				this.vue_edit = !this.vue_edit;
				if(this.vue_edit) {
					this.vue_header_rightText = '完成';
				} else {
					this.vue_header_rightText = '编辑';

				}
			},
			vFun_goods_delate() {
				if(this.vue_list_checkboxGoods.length && this.$store.state.vue_btn_doubleClick) {
					this.$store.commit('set_doubleClick', false);
					MessageBox({
						title: '提示',
						message: '请确认是否删除商品？',
						confirmButtonText: '确认',
						cancelButtonText: '取消',
						confirmButtonClass: 'redBg',
						showCancelButton: true
					}).then(btnType => {
						if(btnType == 'confirm') {
							let cartGoodsCodeStr = '';
							this.vue_list_checkboxGoods.forEach((item, index, arr) => {
								cartGoodsCodeStr += item.cartGoodsCode + ',';
							});
							this.axios({
								method: "DELETE",
								url: "/v3/sale/cartGoodss/" + cartGoodsCodeStr
							}).then((res) => {
								this.queryByPage();
								this.Public.vFun_openSuccess('操作成功');
								this.$store.commit('set_doubleClick', true);
							}).catch((err) => {
								this.Public.vFun_openError(err.response.data);
								this.$store.commit('set_doubleClick', true);
							})
						}
					})
				} else {
					this.Public.vFun_openInfo('您还没有选择商品哦!');
				}

			}
		},
		created() {
		},
		activated() {
			document.querySelector('#vue_id_title').innerHTML="购物车";
			this.queryByPage(); //查询购物车列表
		},
		mounted() {

		}
	}
</script>

<style scoped>

  .noneGoods{
    overflow: hidden;
    width: 100%;
    text-align: center;
  }

  .noneGoods em{
    font-size: 4rem;
    color: #999999;
  }

  .noneGoods span{
    color: #999999;
    display: block;
  }

	.sreePublic>span {
		color: #bbb;
		font-size: .43rem;
		padding-right: 10px;
	}

	.list {
		margin-top: 0.2rem;
		margin-bottom: 2.93rem;
	}

	.list ul li {
		width: 100%;
		height: 3.58rem;
		border-bottom: 1px solid #bbb;
	}

	.checkboxDiv {
		width: 1rem;
		line-height: calc(2.5rem + 10px);
		text-align: center;
	}

	.contentDiv {
		width: 9rem;
		height: 3.58rem;
		padding: 10px 10px 10px 0;
	}

	.contentDiv .img {
		width: 2.5rem;
		height: 2.5rem;
		line-height: calc(2.5rem - 8px);
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-right: 10px;
		text-align: center;
	}

	.contentDiv .img img {
		display: inline-block;
		vertical-align: middle;
	}

	.contentDiv .goodsDetail {
		position: relative;
		width: 5.5rem;
		height: 100%;
	}

	.contentDiv .goodsDetail p:nth-of-type(1) {
		height: .65rem;
		line-height: .65rem;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.contentDiv .goodsDetail p:nth-of-type(2) {
		height: 0.65rem;
		line-height: 0.65rem;
		font-size: 12px;
		color: #ccc;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.contentDiv .goodsDetail>div:nth-of-type(1) {
		color: #D50B0A;
		margin-top: 5px;
	}

	.contentDiv .goodsDetail div:nth-of-type(1)>span>span {
		font-size: .4rem;
		font-weight: bold;
	}

	.countN {
		width: 2.8rem;
	}

	.deleteIcon {
		position: absolute;
		right: .1rem;
		bottom: -.3rem;
	}

	.deleteIcon>i {
		font-size: .5rem;
		color: #ccc;
	}

	.footer {
		position: fixed;
		width: 100%;
		height: 1.33rem;
		bottom: 1.6rem;
		left: 0;
		z-index: 2;
		background: #fff;
		border-top: 1px solid #ccc;
	}

	.footer .selectAll {
		width: 2rem;
		height: 1.33rem;
		line-height: 1.33rem;
		text-align: center;
	}

	.footer .countPric {
		width: 5rem;
		overflow: hidden;
	}

	.footer .countPric>p:nth-of-type(1) {
		height: .7rem;
		line-height: .7rem;
	}

	.footer .countPric>p:nth-of-type(2) {
		height: .5rem;
		line-height: .5rem;
		font-size: 12px;
		color: #ccc;
	}

	.footer .okBtn {
		width: 3rem;
		height: 1.4rem;
		line-height: 1.4rem;
		background: #D50B0A;
		color: #fff;
		text-align: center;
	}

	.footer>span {
		width: 2.08rem;
		height: .8rem;
		line-height: .8rem;
		text-align: center;
		color: #666;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-top: 0.265rem;
		margin-right: 10px;
	}

	.footer>span.red {
		color: #D50B0A;
		border-color: #D50B0A;
	}
</style>
